<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
		<li>
			<h3>水果</h3>
			<p>苹果</p>
			<p>橘子</p>
		</li>
	</ul>
	
	<button onclick="add()">点击追加</button>



	<script>

		let title = '蔬菜';
		let tab1 = '菠菜';
		let tab2 = '生菜';

		let str = `
			<li>
				<h3>${title}</h3>
				<p>${tab1}</p>
				<p>${tab2}</p>
			</li>
		`;
		function add(){
			$('ul').first().append(str);
		}

	</script>




	<script type="text/javascript">
		
		// let [a,b,c] = [10,20];
		// console.log(a,b,c)


		// let [a,b,c] = [10,,20];
		// console.log(a,b,c)

		// let a = 10;
		// let b = [];
		// let c = 30;


		// let [a,b,c] = [10,[20,21,22],30];
		// console.log(a,b,c)

		// let [a,[b],c] = [10,[20],30];
		// console.log(a,b,c)


		let [a,...b] = [10,20,30,40,50];
		console.log(a,b)	

	</script>





	<script type="text/javascript">

		let str = '今天的天气还不错';

		// 字符串接口遍历器
		// for(let item of str){
		// 	console.log(item);
		// }

		// s.startsWith('Hello') // 检测是否 以特定字符开头
		// s.endsWith('!') // 检测是否 以特定字符结尾
		// s.includes('o') // 检测是否 包含特定字符
	
		/*console.log(str.startsWith('今天'));
		console.log(str.startsWith('明天'));
		console.log(str.endsWith('明天'));
		console.log(str.endsWith('不错'));
		console.log(str.includes('不错'));
		console.log(str.includes('hello'));
*/
		/*
		 console.log('|----'.repeat(3)+'西装');
		 console.log('101'.padStart(8,'0'));
		 console.log('123456789'.padStart(8,'0'));
		 console.log('1234567'.padStart(8,'0'));
		 console.log('11-11'.padStart(10,'2019-MM-dd'));
		 console.log('2019-11-11'.padStart(10,'YYYY-MM-dd'));

	</script>




	

	<script type="text/javascript">
		
		// let demo = function(str){
		// 	return str;
		// }
		// demo();

		// let demo = (str) => {
		// 	return str;
		// }
		// console.log(demo('aaaaaaaaa'));


		// 箭头函数
		// let demo = str => str;
		// console.log(demo('hello'));

		// let demo2 = (a,b) => a+b;
		// console.log(demo2(10,20));

		// function changeHtml(){
		// 	console.log(this); window

		// }


		//let title = document.getElementById('title');
		title.onclick = function(){
			console.log(this)
			setTimeout(() => {
				console.log('我的定时器。。。')
				console.log(this);
				this.innerHTML = '<span style="color:red">箭头函数</span>';
			},2000);
		}
	</script>







	<script type="text/javascript">
		// function fun(){
		// 	this.name = 'aaaaa';
		// }

		// new fun();

		// let demo = ()=>{
		// 	this.name = 'aaaaa';
		// }
		// new demo();

	/*	let sum = (...arr)=>{
			let s = 0;
			for(let i = 0;i<arr.length;i++){
				s += arr[i]; 			}
			return s;
		}*/

		//console.log(sum(10,20,30,1,2,321,3,12,3,123,123,12,3,123));
		/*let sum = function (){
			// return a+b+c;
			// arguments
			let s = 0;
			for(let i = 0;i<arguments.length;i++){
				s += arguments[i]; 
				// console.log(arguments[i]);
			}
			return s;
		}
		console.log(sum(10,20,30,1,2,321,3,12,3,123,123,12,3,123));*/
	</script>
</body>
</html>